<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>申请归属店铺</title>
    <meta th:replace="website/uc/inc_head.html" />
    <link rel="stylesheet" href="/static/css/uc.css">
    <style>
        .shop-list {}
        .shop-list .box{
            font-size:16px;border-bottom:1px solid #eee;padding:10px 0;
            display: flex;align-items: center;justify-content: space-between
        }
    </style>
</head>
<body class="body-gray">
<div th:replace="website/template/top.html"></div>
<!--面包-->
<div class="bread-crumb" style="padding:2.67vmin 2.67vmin">
    <span th:replace="website/uc/inc_breadcrumb.html"></span>
    <span class="cur">申请归属店铺</span>
</div>
<div class="content-page uc-page" id="app">

    <!--内容-->

    <div class="c-red ">申请后请等待店长审核，通过后需要请重新登录，才能生效</div>
    <!--店铺列表-->
    <fieldset class="mt10 layui-elem-field layui-field-title site-title">
        <legend><a name="grid">申请归属店铺</a></legend>
    </fieldset>
    <div class="shop-list mt10">
        <div class="box" v-for="item in list">
            <div class="title">{{item.name}}</div>
            <button  class="layui-btn layui-btn-md" @click="actApply(item.id)">申请</button>
        </div>
    </div>
</div>
<script th:src="@{/static/js/vue.js}"></script>
<script th:inline="javascript">
    // const layer = layui.layer
    let uid = [[${session.webUser.id}]];
    var layerIndex
    const vm = new Vue({
        el: '#app'
        ,data: {
            list: [],
        },
        created(){
            this.fetchData()
        },
        methods:{
            //加载数据
            fetchData (){
                console.log('读取数据')
                layerIndex = layer.load(0, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                $.ajax({
                    type: 'get',
                    url: '/web/shop/list',
                    data:{}
                }).done((res)=>{
                    if(res.data.length > 0 ){
                        this.list = res.data
                    }else{
                        layer.msg('没有数据')
                    }
                }).always(function(){
                    setTimeout(()=>{
                        layer.close(layerIndex)
                    },500)
                })
            },
            //申请
            actApply(id){
                layerIndex = layer.load(0, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                $.ajax({
                    type: 'post',
                    url:'/web/shop/apply',
                    data:{
                        userId: uid,
                        shopId: id
                    }
                }).done((res)=>{
                    if(res.code == 0 ){
                        layer.msg('申请成功,请等待审核')
                    }else if(res.code == 1 ){
                        layer.msg('请不要重复申请')
                    }
                }).always(function(){
                    setTimeout(()=>{
                        layer.close(layerIndex)
                    },500)
                })
            }
        }
    })
</script>
</body>
</html>